<template>
	<view class="contain">
		<view class="uni-padding-wrap navTab">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view class="content-item row_between" v-for="(item, index) in datas" :key="index" :class="{bordertopstye: index !=0}">
				<view class="item-head"><image :src="item.headImg" mode="aspectFill"></image></view>
				<view class="item-body row">
					<view class="item-text">{{ item.title }}</view>
					<view class="item-iocn" v-if="item.iocn"><image :src="item.iocn" mode="aspectFill"></image></view>
				</view>
				<view class="item-foot-no row_center" v-if="item.isgz==0" @tap="togz(item)">
					<image src="../../static/img/jiahao.png" mode="aspectFill"></image>
					<view class="foot-text">关注</view>
				</view>
				<view class="item-foot-yes" v-else @tap="togz(item)">
					已关注
				</view>
			</view>
			<view class="uni-tab-bar-loading loading" v-if="!isShowError"><uni-load-more :loadingType="loadingType" :contentText="loadingText"></uni-load-more></view>
			
			<div class="col_center wrap" v-if="isShowError">
				<image src="../../../static/img/server_error.png" mode="widthFix"></image>
				<span>页面请求失败～</span>
			
				<button class="btn" @click="reloadFunc">重新加载</button>
			</div>
		</view>
		
	</view>
</template>

<script>
import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniSegmentedControl,
		uniLoadMore
	},
	data() {
		return {
			items: ['我的关注', '推荐关注'],
			current: 0,
			colorIndex: 0,
			activeColor: '#333333',
			styleType: 'text',
			datas: [
				{ id: '1', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '/static/img/VET.png',isgz:0},
				{ id: '2', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:1},
				{ id: '3', headImg: '/static/img/login_head.png', title: '中国财经故事', iocn: '' ,isgz:0},
				{ id: '4', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '/static/img/VET.png' ,isgz:1},
				{ id: '5', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '6', headImg: '/static/img/login_head.png', title: '中国财经故事', iocn: '/static/img/VET.png' ,isgz:0},
				{ id: '7', headImg: '/static/img/login_head.png', title: '趣读君', iocn: '' ,isgz:1},
				{ id: '8', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '9', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '10', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '11', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:1},
				{ id: '12', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '13', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:1},
				{ id: '14', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0},
				{ id: '15', headImg: '/static/img/login_head.png', title: '宏观经济', iocn: '' ,isgz:0}
			],
			isShowError: false,
			loadingText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			loadingType: 1
		};
	},
	methods: {
		onClickItem(index) {
			if (this.current !== index) {
				this.current = index;
			}
		},
		togz(e){
			let len = this.datas.length;
			for (let i = 0; i < len; i++) {
				if (e.id == this.datas[i].id) {
					this.datas[i].isgz=!this.datas[i].isgz;
					break;
				}
			}
		},
		reloadFunc(){
			this.publishLong = 0;
			// this.newsList('', this.typeIndex);
			uni.showLoading({
				title:"加载中..."
			});
			setTimeout(()=>{
				uni.hideLoading();
			}, 10000);
		}
	},
	onLoad(opt) {
		this.current=parseInt(opt.current);
		console.log(opt.current)
	}
};
</script>

<style lang="scss">
.navTab {
	position: sticky;
	background-color: #FFFFFF;
	color: white;
	z-index: 996;
	/* #ifdef APP-PLUS */
	top: 0;
	/* #endif */
	/* #ifdef H5 */
	top:88upx;
	/* #endif */
	font-size: 30upx;
	font-weight: bold;
}
.content{
	border-top: 2upx solid #E6E6E6;
}
.bordertopstye{
		border-top: 2upx solid #E6E6E6;
	}
.content-item {
	margin: 0upx 26upx;
	height: 140upx;

	.item-head {
		width: 100upx;
		height: 100upx;
		image {
			width: 100upx;
			height: 100upx;
		}
	}
	.item-body {
		flex: 1;
		.item-text {
			color: #343434;
			margin: 0upx 6upx 0upx 20upx;
			font-size: 30upx;
			line-height: 1;
		}
		.item-iocn {
			width: 30upx;
			height: 30upx;
			line-height: 1;
			image {
				width: 30upx;
				height: 30upx;
			}
		}
	}
	.item-foot-no {
		width: 120upx;
		height: 42upx;
		background:rgba(255,202,10,1);
		border-radius: 6upx;
		text-align: center;
		image {
			width: 23upx;
			height: 23upx;
		}
		.foot-text {
			font-size: 26upx;
			line-height: 1;
			font-size: 26upx;
			font-weight: bold;
			margin-left: 9upx;
		}
	}
	.item-foot-yes{
		width: 120upx;
		height: 42upx;
		border-radius: 6upx;
		text-align: center;
		background:#CCCCCC;
		color: #FFFFFF;
		font-size:26upx;
		font-weight:bold;
	}
}
.loading{
	background: #F5F5F5;
	flex: 1;
}
.btn{height: 94upx; line-height: 94upx; width: 236upx; background: #FFCA0A; border-radius: 12upx;
	text-align: center; color: #303030; font-size: 36upx; margin-top: 70upx;font-weight: bold;}
</style>
